import React, { Component, Fragment } from 'react'
import { connect } from 'dva'
import { formatMessage, FormattedMessage } from 'umi/locale'
import { List } from 'antd'
import WrappedEditPasswordForm from './EditPassword'

@connect(({ user, loading }) => ({
  user,
  submitting: loading.effects['user/changePassword'],
}))
class SecurityView extends Component {

  // 提交成功后的信息
  handleSubmit = (payload) => {
    const { dispatch } = this.props
    dispatch({
      type: 'user/changePassword',
      payload,
    })
  }

  // 点击打开/关闭弹窗
  handleClick = (payload) => {
    const { dispatch } = this.props
    dispatch({
      type: 'user/save',
      payload,
    })
  }

  getData = () => [{
    title: formatMessage({ id: 'app.settings.security.password' }, {}),
    actions: [
      <a onClick={this.handleClick.bind(this, { visible: true })}>
        <FormattedMessage id="app.settings.security.modify" defaultMessage="Modify" />
      </a>,
    ],
  }]

  render() {
    const { user } = this.props
    const { visible } = user
    const props = {
      visible,
      handleSubmit: this.handleSubmit,
      handleCancel: this.handleClick
    }
    return (
      <Fragment>
        <WrappedEditPasswordForm {...this} {...props} />
        <List
          itemLayout="horizontal"
          dataSource={this.getData()}
          renderItem={item => (
            <List.Item actions={item.actions}>
              <List.Item.Meta title={item.title} description={item.description} />
            </List.Item>
          )}
        />
        <div style={{ height: 300 }} />
      </Fragment>
    )
  }
}

export default SecurityView